<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        * {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		html {
			font-size: 12px;
			font-family: Ubuntu, simHei, sans-serif;
			font-weight: 400;
		}

		body {
			font-size: 1rem;
		}

		table,
		td,
		th {
			border-collapse: collapse;
			border-spacing: 0;
		}

		table {
			width: 100%;
		}

		td,
		th {
			border: 1px solid #bcbcbc;
			padding: 5px 10px;
		}

		th {
			background: #42b983;
			font-size: 1.2rem;
			font-weight: 400;
			color: #fff;
			cursor: pointer;
		}

		tr:nth-of-type(odd) {
			background: #fff;
		}

		tr:nth-of-type(even) {
			background: #eee;
		}

		fieldset {
			border: 1px solid #BCBCBC;
			padding: 15px;
		}

		input {
			outline: none;
		}

		input[type=text] {
			border: 1px solid #ccc;
			padding: .5rem .3rem;
		}

		input[type=text]:focus {
			border-color: #42b983;
		}

		button {
			outline: none;
			padding: 5px 8px;
			color: #fff;
			border: 1px solid #BCBCBC;
			border-radius: 3px;
			background-color: #009A61;
			cursor: pointer;
		}
		button:hover{
			opacity: 0.8;
		}

		#app {
			margin: 0 auto;
			max-width: 640px
		}

		.form-group {
			margin: 10px;
		}

		.form-group > label {
			display: inline-block;
			width: 10rem;
			text-align: right;
		}

		.form-group > input,
		.form-group > select {
			display: inline-block;
			height: 2.5rem;
			line-height: 2.5rem;
		}

		.text-center{
			text-align: center;
		}

		.pagination {
			display: inline-block;
			padding-left: 0;
			margin: 21px 0;
			border-radius: 3px;
		}

		.pagination > li {
			display: inline;
		}

		.pagination > li > a {
			position: relative;
			float: left;
			padding: 6px 12px;
			line-height: 1.5;
			text-decoration: none;
			color: #009a61;
			background-color: #fff;
			border: 1px solid #ddd;
			margin-left: -1px;
			list-style: none;
		}

		.pagination > li > a:hover {
			background-color: #eee;
		}

		.pagination .active {
			color: #fff;
			background-color: #009a61;
			border-left: none;
			border-right: none;
		}

		.pagination .active:hover {
			background: #009a61;
			cursor: default;
		}

		.pagination > li:first-child > a .p {
			border-bottom-left-radius: 3px;
			border-top-left-radius: 3px;
		}

		.pagination > li:last-child > a {
			border-bottom-right-radius: 3px;
			border-top-right-radius: 3px;
		}
        </style>
    </head>
    <body>
        <div id="app">
            <fieldset>
                <legend>
                    	创建新用户
                </legend>
                <div class="form-group">
                    <label>姓名:</label>
                    <input type="text" v-model="newPerson.name"/>
                </div>
                <div class="form-group">
                    <label>年龄:</label>
                    <input type="text" v-model="newPerson.age"/>
                </div>
                <div class="form-group">
                    <label>性别:</label>
                    <select v-model="newPerson.sex">
                    <option value="Male">男</option>
                    <option value="Female">女</option>
                </select>
                </div>
                <div class="form-group">
                    <label></label>
                    <button @click="createPerson">创建</button>
                </div>
	        </fieldset>
	        <table>
	            <thead>
	                <tr>
	                    <th>性别</th>
	                    <th>年龄</th>
	                    <th>性别</th>
	                    <th>删除</th>
	                </tr>
	            </thead>
	            <tbody>
	                <tr v-for="person in people">
	                    <td>{{ person.name }}</td>
	                    <td>{{ person.age }}</td>
	                    <td>{{ person.sex }}</td>
	                    <td :class="'text-center'"><button @click="deletePerson($index)">删除</button></td>
	                </tr>
	            </tbody>
	        </table>
        </div>
    </body>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                newPerson: {
                    name: '',
                    age: 0,
                    sex: '男'
                },
                people: [{
                    name: '钟小艾',
                    age: 40,
                    sex: '女'
                }, {
                    name: '高育良',
                    age: 52,
                    sex: '男'
                }, {
                    name: '祁同伟',
                    age: 48,
                    sex: '男'
                }, {
                    name: '李达康',
                    age: 50,
                    sex: '男'
                }]
            },
            methods:{
                createPerson: function(){
                    this.people.push(this.newPerson);
                    // 添加完newPerson对象后，重置newPerson对象
                    this.newPerson = {name: '', age: 0, sex: '男'}
                },
                deletePerson: function(index){
                    // 删一个数组元素
                    this.people.splice(index,1);
                }
            }
        })
    </script>

</html>